<template>
  <div class="_wz_dynamicVehicleRight">
<!--    头部-->
    <div class="_wz_dynamicVehicleRight_list" style="height: 260px;">

      <div class="_wz_dynamicVehicleRight_list_col">
        <div class="_wz_dy_title _wz_title_select" style="padding: 0 0 0 40px;">营运车辆/离线车辆统计</div>
        <div class="_wz_dy_div">
          <vehicleStatistics/>
        </div>
      </div>
      <div class="_wz_dynamicVehicleRight_list_col">
        <div class="_wz_dy_title _wz_title_select" style="padding: 0 0 0 40px;">车辆报警类型统计</div>
        <div class="_wz_dy_div">
          <ringChart :dataConfiguration="ringChartData" v-if="!!ringChartData.dataList && ringChartData.dataList.length > 0"/>
        </div>
      </div>
    </div>
<!--    中间-->
    <div class="_wz_dynamicVehicleRight_list" style="flex-direction: column;height: 360px;">
      <div class="_wz_dy_title">
        <span :class="{'_wz_title_select' : daySwitching == 0 }" @click="daySwitching = 0" @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true">车辆行驶里程排名</span>
        <span :class="{'_wz_title_select' : daySwitching == 1 }" @click="daySwitching = 1" @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true">企业运营里程排名</span>
        <span :class="{'_wz_title_select' : daySwitching == 2 }" @click="daySwitching = 2"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true">企业运营率排名</span>
<!--        <span :class="{'_wz_title_select' : daySwitching == 3 }" @click="daySwitching = 3"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true">企业报警率排名</span>-->
      </div>
      <div class="_wz_dy_div">

<!--        -->

        <Carousel v-model="daySwitching" style="height: 100%;" dots="none" arrow="never" :autoplay="dayCarousel" :autoplay-speed="10000">
          <CarouselItem style="height: 100%;">
            <tableRoll :tableData="tableData"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true"/>
          </CarouselItem>
          <CarouselItem style="height: 100%;">
            <tableRoll :tableData="tableData1"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true"/>
          </CarouselItem>
          <CarouselItem style="height: 100%;">
            <tableRoll :tableData="tableData2"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true"/>
          </CarouselItem>
<!--          <CarouselItem style="height: 100%;">-->
<!--            <tableRoll :tableData="tableData3"  @mouseenter="dayCarousel = false" @mouseleave=" dayCarousel = true"/>-->
<!--          </CarouselItem>-->
        </Carousel>
      </div>
    </div>

<!--    底部-->
    <div class="_wz_dynamicVehicleRight_list" style="height: calc(100% - 20px - 260px - 360px);">
      <div class="_wz_dynamicVehicleRight_list_col">
        <div class="_wz_dy_title">
          <span :class="{'_wz_title_select' : weeklySwitching == 0 }" @click="weeklySwitching = 0"  @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true">车辆行驶趋势</span>
          <span :class="{'_wz_title_select' : weeklySwitching == 1 }" @click="weeklySwitching = 1"  @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true">车辆运营趋势</span>
        </div>
        <div class="_wz_dy_div">
          <Carousel v-model="weeklySwitching" style="height: 100%;" dots="none" arrow="never" :autoplay="weekCarousel" :autoplay-speed="5000">
            <CarouselItem style="height: 100%;">
              <lineChart :dataConfiguration="lineChartData" v-if="!!lineChartData.dataList && lineChartData.dataList.length > 0"   @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true"/>
            </CarouselItem>
            <CarouselItem style="height: 100%;">
              <areaChart :dataConfiguration="areaChartData" v-if="!!areaChartData.dataList && areaChartData.dataList.length > 0"   @mouseenter="weekCarousel = false" @mouseleave=" weekCarousel = true"/>
            </CarouselItem>
          </Carousel>
        </div>
      </div>

      <div class="_wz_dynamicVehicleRight_list_col">
        <div class="_wz_dy_title">
          <span :class="{'_wz_title_select' : weeklySwitching1 == 0 }" @click="weeklySwitching1 = 0">车辆报警趋势</span>
          <span :class="{'_wz_title_select' : weeklySwitching1 == 1 }" @click="weeklySwitching1 = 1">报警车辆趋势</span>
        </div>
        <div class="_wz_dy_div">
          <Carousel v-model="weeklySwitching1" style="height: 100%;" dots="none" arrow="never" autoplay :autoplay-speed="5000">
            <CarouselItem style="height: 100%;">
              <areaChart :dataConfiguration="areaChartData1" v-if="!!areaChartData1.dataList && areaChartData1.dataList.length > 0"/>
            </CarouselItem>
            <CarouselItem style="height: 100%;">
              <lineChart :dataConfiguration="lineChartData1" v-if="!!lineChartData1.dataList && lineChartData1.dataList.length > 0"/>
            </CarouselItem>
          </Carousel>
        </div>
      </div>

    </div>

  </div>
</template>
<script>

import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'
import dayjs from "dayjs";
import {getMenu} from "@/util/getMenu";
import {getFirstMenu} from "@/router/dynamicRouting";
//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex





import lineChart from '@/components/charts/baiDu/lineChart/charts.vue'  //折线图
import areaChart from '@/components/charts/baiDu/areaChart/charts.vue'  //面积图
import tableRoll from '../dynamicVehicle/tableRoll.vue'  //表格轮播
import ringChart from '@/components/charts/baiDu/ringChart/charts.vue'  //环形图
import vehicleStatistics from '../dynamicVehicle/vehicleStatistics.vue'  //营运车辆/离线车辆统计

//reactive
export default defineComponent({
  name: 'dynamicVehicleRight',//组件名称
  components: {
    lineChart,//折线图
    areaChart,//面积图
    tableRoll,//表格轮播
    ringChart,//表格轮播
    vehicleStatistics,//营运车辆/离线车辆统计
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const $dayjs = inject('$dayjs');//引用全局组件
    const router = useRouter();//路由跳转使用
    const $common = inject('$common');//自己封装的方法


    const state = reactive({
      moduleRef:ref(),
      //实时车辆营运/离线统计



      //车辆报警类型统计
      ringChartData:{
        "id":"ringChart",
        "width":'100%',
        "height":'100%',
        roseChart:0,//玫瑰图
        "colors":["#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[
          {name:'超速报警',value:38},
          {name:'ADAS报警数',value:1007},
          {name:'疲劳报警',value:49},
        ],
        labelShow:true,
        "legend":1,
        size:70,
        withinSize:40,
        semiCircle:100,
      },

      ////////////////////////////////////中间
      daySwitching:0,//当日切换
      dayCarousel:true,//天的轮播切换
      //日车辆行驶里程排名
      tableData:{
        headData:[
          {name:'排名',width:50,key:'pm'},
          {name:'车牌号',width:90,key:'cph'},
          {name:'运输企业',key:'ysqy'},
          {name:'运输类型',width:85,key:'yslx'},
          {name:'行驶里程',width:90,key:'xslc'},
        ],
        dataList:[]
      },
      //日企业运营率排名
      tableData1:{
        headData:[
          {name:'排名',width:50,key:'pm'},
          {name:'经营企业',key:'ysqy'},
          {name:'企业车辆',width:90,key:'qycl'},
          {name:'运营里程',width:100,key:'yylc'},
          {name:'车辆运营数',width:90,key:'clyys'},
        ],
        dataList:[]
      },
      //日车辆行驶里程排名
      tableData2:{
        headData:[
          {name:'排名',width:50,key:'pm'},
          {name:'经营企业',key:'ysqy'},
          {name:'企业车辆',width:90,key:'qycl'},
          {name:'车辆运营数',width:100,key:'clyys'},
          {name:'车辆运营率',width:90,key:'clyyl'},
        ],
        dataList:[]
      },
      //日企业运营率排名
      tableData3:{
        headData:[
          {name:'排名',width:50,key:'pm'},
          {name:'车牌号',width:90,key:'cph'},
          {name:'运输企业',key:'ysqy'},
          {name:'运输类型',width:100,key:'yslx'},
          {name:'报警率',width:90,key:'xslc'},
        ],
        dataList:[]
      },

      ////////////////////////////////////底部
      weeklySwitching:0,//周切换
      weekCarousel:true,//天的轮播切换


      lineChartData:{//折线图数据
        "id":"lineChart",
        "width":'100%',
        "height":'100%',
        "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "xColor":"#fff",
        "yColor":"#fff",
        "xShow":false,
        "yShow":true,
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[],
        "legend":0,
        "marginUnit":"%",
        "top":20,
        "right":4,
        "bottom":4,
        "left":4
      },
      areaChartData:{//周期车辆运营趋势
        "id":"areaChart1",
        "width":'100%',
        "height":'100%',
        "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "xColor":"#fff",
        "yColor":"#fff",
        "xShow":false,
        "yShow":true,
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[],
        "legend":1,
        "marginUnit":"%",
        "top":20,
        "right":4,
        "bottom":4,
        "left":4
      },


      weeklySwitching1:0,//周切换
      weekCarousel1:true,//天的轮播切换
      lineChartData1:{//折线图数据
        "id":"lineChart2",
        "width":'100%',
        "height":'100%',
        "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "xColor":"#fff",
        "yColor":"#fff",
        "xShow":false,
        "yShow":true,
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[],
        "legend":1,
        "marginUnit":"%",
        "top":20,
        "right":4,
        "bottom":4,
        "left":4
      },
      areaChartData1:{//周期车辆运营趋势
        "id":"areaChart2",
        "width":'100%',
        "height":'100%',
        "colors":["#2d8cf0","#19be6b","#ff9900","#ed4014","#9b66e6","#3fcece","#4b588d","#b7b83f","#b9783f","#4efd95","#2ebdcc","#375397","#22597e","#2e33d1","#3bd2a6","#95CEFF","#A9FF96","#FFBC75","#AAFFFA","#999EFF","#FF7599","#FDEC6D","#44A9A8","#2D8CF0"],
        "xColor":"#fff",
        "yColor":"#fff",
        "xShow":false,
        "yShow":true,
        "backColor":"rgba(0,0,0,0)",
        "legendColor":"#fff",
        "dataList":[],
        "legend":1,
        "marginUnit":"%",
        "top":20,
        "right":4,
        "bottom":4,
        "left":4
      },

    });


    //页面加载初始化
    const loadInit = ()=>{


      state.lineChartData.dataList = [
        {"type":"行驶历程（/km）","name":"2023-09-27","value":1038847},
        {"type":"行驶历程（/km）","name":"2023-09-26","value":687476},
        {"type":"行驶历程（/km）","name":"2023-09-25","value":572926},
        {"type":"行驶历程（/km）","name":"2023-09-24","value":567017},
        {"type":"行驶历程（/km）","name":"2023-09-23","value":588315},
        {"type":"行驶历程（/km）","name":"2023-09-22","value":570145},
        {"type":"行驶历程（/km）","name":"2023-09-21","value":568317}
      ]

      state.areaChartData.dataList = [
        {"type":"运营车辆（/辆）","name":"2023-09-27","value":3440},
        {"type":"运营车辆（/辆）","name":"2023-09-26","value":2027},
        {"type":"运营车辆（/辆）","name":"2023-09-25","value":1675},
        {"type":"运营车辆（/辆）","name":"2023-09-24","value":1599},
        {"type":"运营车辆（/辆）","name":"2023-09-23","value":1646},
        {"type":"运营车辆（/辆）","name":"2023-09-22","value":1496},
        {"type":"运营车辆（/辆）","name":"2023-09-21","value":1603},
      ]


      /////////////////////////////////////////////////////中间

      state.tableData.dataList = [
        {cph:'冀ET9316',ysqy:'邢台县聚伟货物运输有限公司',yslx:'普货运输',xslc: 1468 + '/km'},
        {cph:'冀EN9105',ysqy:'邢台洪昌货物运输有限公司',yslx:'普货运输',xslc: 1458 + '/km'},
        {cph:'冀EN4821',ysqy:'河北丰百利货物运输有限公司',yslx:'普货运输',xslc: 1436 + '/km'},
        {cph:'冀E5681Y',ysqy:'邢台县正通货物运输有限公司',yslx:'普货运输',xslc: 1391 + '/km'},
        {cph:'冀EN7623',ysqy:'邢台洪昌货物运输有限公司',yslx:'普货运输',xslc: 1376 + '/km'},
        {cph:'冀EN2807',ysqy:'邢台宁畅货物运输有限公司',yslx:'普货运输',xslc: 1331 + '/km'},
        {cph:'冀EM9999',ysqy:'邢台程玖汽车贸易有限公司',yslx:'普货运输',xslc: 1265 + '/km'},
        {cph:'冀EN2126',ysqy:'邢台洪昌货物运输有限公司',yslx:'普货运输',xslc: 1264 + '/km'},
        {cph:'冀EW5486',ysqy:'邢台宁畅货物运输有限公司',yslx:'普货运输',xslc: 1252 + '/km'},
        {cph:'冀EX1101',ysqy:'邢台宁畅货物运输有限公司',yslx:'普货运输',xslc: 1238 + '/km'},
        {cph:'冀EW3955',ysqy:'邢台越顺货物运输有限公司',yslx:'普货运输',xslc: 1207 + '/km'},
        {cph:'冀EV3878',ysqy:'邢台旭润货物运输有限公司',yslx:'普货运输',xslc: 1150 + '/km'},
        {cph:'冀EV2098',ysqy:'邢台旭润货物运输有限公司',yslx:'普货运输',xslc: 1092 + '/km'},
        {cph:'冀EP9827',ysqy:'邢台县万运达运输队',yslx:'普货运输',xslc: 1084 + '/km'},
        {cph:'冀EN1142',ysqy:'河北丰百利货物运输有限公司',yslx:'普货运输',xslc: 1083 + '/km'},
        {cph:'冀EW2227',ysqy:'邢台县万运达运输队',yslx:'普货运输',xslc: 1080 + '/km'},
        {cph:'冀EW9962',ysqy:'邢台县正通货物运输有限公司',yslx:'普货运输',xslc: 1071 + '/km'},
        {cph:'冀EU4439',ysqy:'邢台融信物流有限公司',yslx:'普货运输',xslc: 1055 + '/km'},
        {cph:'冀E2235Z',ysqy:'邢台盛通汽车运输服务有限公司',yslx:'普货运输',xslc: 1047 + '/km'},
        {cph:'冀EW5984',ysqy:'河北丰百利货物运输有限公司',yslx:'普货运输',xslc: 1045 + '/km'},
      ]


      state.tableData1.dataList = [
        {ysqy:'邢台越顺货物运输有限公司',qycl:'297',yylc:'53443/km',clyys:148},
        {ysqy:'邢台洪昌货物运输有限公司',qycl:'205',yylc:'59130/km',clyys:117},
        {ysqy:'邢台润泽道路运输有限公司',qycl:'330',yylc:'54060/km',clyys:151},
        {ysqy:'邢台县永兴货运联合车队（普通合伙）',qycl:'439',yylc:'51734/km',clyys:212},
        {ysqy:'邢台宁畅货物运输有限公司',qycl:'142',yylc:'49741/km',clyys:74},
        {ysqy:'河北丰百利货物运输有限公司',qycl:'136',yylc:'47658/km',clyys:65},
        {ysqy:'邢台县万运达运输队',qycl:'102',yylc:'46626/km',clyys:61},
        {ysqy:'邢台县勤诚车队',qycl:'205',yylc:'41965/km',clyys:96},
        {ysqy:'邢台德达物流服务有限公司',qycl:'186',yylc:'41962/km',clyys:66},
        {ysqy:'邢台永堂货运车队',qycl:'196',yylc:'41314/km',clyys:87},
        {ysqy:'邢台旭润货物运输有限公司',qycl:'129',yylc:'41185/km',clyys:60},
        {ysqy:'邢台县润杰汽车销售有限公司',qycl:'132',yylc:'40361/km',clyys:66},
        {ysqy:'邢台县盛鑫货运车队',qycl:'137',yylc:'39523/km',clyys:57},
        {ysqy:'邢台华运运输有限公司',qycl:'59',yylc:'39503/km',clyys:43},
        {ysqy:'河北途鸣货物运输有限公司',qycl:'126',yylc:'38599/km',clyys:58},
        {ysqy:'邢台市桥西区宝顺车队',qycl:'113',yylc:'36520/km',clyys:47},
        {ysqy:'邢台县南石门鑫兴车队',qycl:'132',yylc:'36079/km',clyys:56},
        {ysqy:'邢台县炅泉运输有限公司',qycl:'44',yylc:'32136/km',clyys:29},
        {ysqy:'邢台县捷丰货运车队',qycl:'78',yylc:'31728/km',clyys:38},
        {ysqy:'邢台县正通货物运输有限公司',qycl:'39',yylc:'31488/km',clyys:24},
      ]



      // {name:'经营企业',key:'ysqy'},
      // {name:'企业车辆',width:90,key:'qycl'},
      // {name:'车辆运营数',width:100,key:'clyys'},
      // {name:'车辆运营率',width:90,key:'clyyl'},
      state.tableData2.dataList = [
        {ysqy:'邢台鸿晟运输有限公司',qycl:'8',clyys:'8',clyyl:100 + '%'},
        {ysqy:'邢台市正度运输队',qycl:'2',clyys:'2',clyyl:100 + '%'},
        {ysqy:'邢台柄成货物运输有限公司',qycl:'2',clyys:'2',clyyl:100 + '%'},
        {ysqy:'邢台县多旺运输队',qycl:'4',clyys:'4',clyyl:100 + '%'},
        {ysqy:'邢台市薇悦建筑工程有限公司',qycl:'2',clyys:'2',clyyl:100 + '%'},
        {ysqy:'邢台县德康贸易有限公司',qycl:'2',clyys:'2',clyyl:100 + '%'},
        {ysqy:'河北云山民爆物品销售有限公司',qycl:'16',clyys:'15',clyyl:93.75 + '%'},
        {ysqy:'邢台中润货物运输有限公司',qycl:'53',clyys:'48',clyyl:90.57 + '%'},
        {ysqy:'邢台县润通货物运输有限公司',qycl:'10',clyys:'9',clyyl:90 + '%'},
        {ysqy:'邢台县宏伟物流有限公司',qycl:'19',clyys:'17',clyyl:89.47 + '%'},
        {ysqy:'邢台华运运输有限公司',qycl:'49',clyys:'42',clyyl:85.71 + '%'},
        {ysqy:'邢台县正通货物运输有限公司',qycl:'76',clyys:'65',clyyl:85.53 + '%'},
        {ysqy:'邢台昊迪运输有限公司',qycl:'19',clyys:'16',clyyl:84.21 + '%'},
        {ysqy:'邢台帝轩商贸有限公司',qycl:'6',clyys:'5',clyyl:83.33 + '%'},
        {ysqy:'邢台润辰货物运输有限公司',qycl:'6',clyys:'5',clyyl:83.33 + '%'},
        {ysqy:'邢台县特豪货运车队',qycl:'39',clyys:'31',clyyl:79.49 + '%'},
        {ysqy:'邢台洪昌货物运输有限公司',qycl:'176',clyys:'139',clyyl:78.98 + '%'},
        {ysqy:'邢台市悦辰货物运输有限公司',qycl:'9',clyys:'7',clyyl:77.78 + '%'},
        {ysqy:'邢台速安货运车队',qycl:'9',clyys:'7',clyyl:77.78 + '%'},
        {ysqy:'邢台县上旗物流有限公司',qycl:'51',clyys:'39',clyyl:76.47 + '%'},

      ]
      state.tableData3.dataList = [
        {pm:1,cph:'冀EQ2641',ysqy:'赞皇县鑫豪运输有限公司',yslx:'普货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:2,cph:'冀EQ9738',ysqy:'邢东新区娇元道路运输部',yslx:'危货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:3,cph:'冀EQ1235',ysqy:'邢台旭越运输有限公司',yslx:'旅客运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:4,cph:'冀EQ8623',ysqy:'平山县恒宁运输队',yslx:'出租网约',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:5,cph:'冀AF6Y07',ysqy:'南和区超阳货物运输服务部',yslx:'城市公交',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:6,cph:'冀ALH111',ysqy:'河北长源电气工程有限公司',yslx:'场站维修',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:7,cph:'冀AS8976',ysqy:'任县申通快递服务有限公司',yslx:'邮政转运',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:8,cph:'冀AZR972',ysqy:'邢台沐凯建筑工程有限公司',yslx:'汽车租赁',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:9,cph:'冀EQ2641',ysqy:'赞皇县鑫豪运输有限公司',yslx:'普货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:10,cph:'冀EQ9738',ysqy:'邢东新区娇元道路运输部',yslx:'危货运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:11,cph:'冀EQ1235',ysqy:'邢台旭越运输有限公司',yslx:'旅客运输',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:12,cph:'冀EQ8623',ysqy:'平山县恒宁运输队',yslx:'出租网约',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:13,cph:'冀AF6Y07',ysqy:'南和区超阳货物运输服务部',yslx:'城市公交',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:14,cph:'冀ALH111',ysqy:'河北长源电气工程有限公司',yslx:'场站维修',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
        {pm:15,cph:'冀AS8976',ysqy:'任县申通快递服务有限公司',yslx:'邮政转运',xslc:Math.floor(Math.random() * (100 - 1)) + 1 + '%'},
      ]


      /////////////////////////////////////////////////////中间


      state.lineChartData1.dataList = [
        {"type":"报警车辆(/辆)","name":"2023-09-27","value":60},
        {"type":"报警车辆(/辆)","name":"2023-09-26","value":63},
        {"type":"报警车辆(/辆)","name":"2023-09-25","value":57},
        {"type":"报警车辆(/辆)","name":"2023-09-24","value":56},
        {"type":"报警车辆(/辆)","name":"2023-09-23","value":63},
        {"type":"报警车辆(/辆)","name":"2023-09-22","value":78},
      ]

      state.areaChartData1.dataList = [
        {"type":"超速报警","name":"2023-09-27","value":47},
        {"type":"超速报警","name":"2023-09-26","value":60},
        {"type":"超速报警","name":"2023-09-25","value":131},
        {"type":"超速报警","name":"2023-09-24","value":100},
        {"type":"超速报警","name":"2023-09-23","value":38},
        {"type":"超速报警","name":"2023-09-22","value":86},
        {"type":"超速报警","name":"2023-09-21","value":40},

        {"type":"疲劳报警","name":"2023-09-27","value":42},
        {"type":"疲劳报警","name":"2023-09-26","value":90},
        {"type":"疲劳报警","name":"2023-09-25","value":48},
        {"type":"疲劳报警","name":"2023-09-24","value":39},
        {"type":"疲劳报警","name":"2023-09-23","value":49},
        {"type":"疲劳报警","name":"2023-09-22","value":56},
        {"type":"疲劳报警","name":"2023-09-21","value":61}
      ]
    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

      loadInit()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})


</script>
<style lang="less">
._wz_dynamicVehicleRight{
  position: relative;
  height: 100%;
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  ._wz_dynamicVehicleRight_list{
    height: calc((100% - 20px - 260px) / 2);
    display: flex;
    justify-content: space-between;
    ._wz_dynamicVehicleRight_list_col{
      width: calc((100% - 10px) / 2);
      height: 100%;

    }

  }
}
</style>
